<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap的HTML标准模板</title>
        <!-- Bootstrap -->
        <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
        <!--你自己的样式文件 -->

        <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>
<body>
    <!-- 【1】表单 -->
    <!--

    （1）基础表单
        role="form"
        html 里面的 role 本质上是增强语义性，当现有的HTML标签不能充分表达语义性的时候，就可以借助role来说明。通常这种情况出现在一些自定义的组件上，这样可增强组件的可访问性、可用性和可交互性。
        role的作用是描述一个非标准的tag的实际作用。比如用div做button，那么设置div 的 role=“button”，辅助工具就可以认出这实际上是个button
        比如，
        <div role="checkbox" aria-checked="checked"></div>




        div包括，设置class为form-group


        input设置.form-control
        通过定制了一个类名`form-control`，也就是说，如果这几个元素使用了类名“form-control”，将会实现一些设计上的定制效果。
        1、宽度变成了100%

        2、设置了一个浅灰色（#ccc）的边框

        3、具有4px的圆角

        4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化

        5、设置了placeholder的颜色为#999

     -->


         <!-- 单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。 -->
        <form role="form">
        <!-- placeholder的作用：
            类似于value，显示提示的作用
            for和id关联
            当点击label中的内容时，与之关联的input会聚焦
         -->
            <div class="form-group">
                <label for="email">邮箱：</label>
                <input type="email" class="form-control" id="email" name="email" placeholder="请输入邮箱">
            </div>
            <div class="form-group">
                <label for="password">密码：</label>
                <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox">记住密码
                </label>
            </div>
             <button type="submit" class="btn btn-default">Submit</button>
        </form>


    <!-- （2）内联表单 -->
        <form role="form" class="form-inline">
    <!-- .form-inline
            是的表单呈现水平排列
     -->


            <div class="form-group">
                <label for="email">邮箱：</label>
                <input type="email" class="form-control" id="email" name="email" placeholder="请输入邮箱">
            </div>
            <div class="form-group">
                <label for="password">密码：</label>
                <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox">记住密码
                </label>
            </div>
             <button type="submit" class="btn btn-default">Submit</button>
        </form>


    <form role="form" class="form-inline">
    <!-- .form-inline
            是的表单呈现水平排列
            .sr-only隐藏label
     -->

     <!-- 一定要添加 label 标签
            如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为 label 设置 .sr-only 类将其隐藏。还有一些辅助技术提供label标签的替代方案，比如 aria-label、aria-labelledby 或 title 属性。如果这些都不存在，屏幕阅读器可能会采取使用 placeholder 属性，如果存在的话，使用占位符来替代其他的标记，但要注意，这种方法是不妥当的。 -->
            <div class="form-group">
                <label for="email" class="sr-only">邮箱：</label>
                <input type="email" class="form-control" id="email" name="email" placeholder="请输入邮箱">
            </div>
            <div class="form-group" >
                <label for="password" class="sr-only">密码：</label>
                <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox">记住密码
                </label>
            </div>
             <button type="submit" class="btn btn-default">Submit</button>
        </form>



        <!--  -->
        <form class="form-inline">
            <div class="form-group">
                <label for="Amout" class="sr-only">Amout</label>
                <div class="input-group">
                <!-- .form-group-addon 实现div和输入框的组合-->
                    <div class="input-group-addon">
                    $
                    </div>
                    <input type="text" name="" id="Amout" class="form-control">
                    <!-- .form-group-addon 实现div和输入框的组合-->
                    <div class="input-group-addon">
                    .00
                    </div>
                </div>

            </div>
            <button type="submit" class="btn btn-primary">提交</button>
        </form>


    <!-- （3）水平排列表单 -->
        <!-- 每一个form-group处在同一个水平线上 -->
        <!-- .form-horizontal表示采用水平排列 -->
        <form class="form-horizontal">


          <div class="form-group">

            <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-10">
              <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            </div>
          </div>


          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
            <div class="col-sm-10">
              <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
            </div>
          </div>


          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <div class="checkbox">
                <label>
                  <input type="checkbox"> Remember me
                </label>
              </div>
            </div>
          </div>


          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-default">Sign in</button>
            </div>
          </div>


        </form>



    <!-- （4）支持的控件-->
        <!-- 包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。 -->
        <input type="text" class="form-control" name="" placeholder="text">
        <textarea class="form-control" rows="3"></textarea>


        <!-- 可选，使用label包裹 -->
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">
            Option one is this and that&mdash;be sure to include why it's great
          </label>
        </div>

        <!-- 不可选 -->
        <div class="checkbox disabled">
          <label>
            <input type="checkbox" value="" disabled>
            Option two is disabled
          </label>
        </div>

    <!-- 设置同样的name来关联 -->
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
            Option one is this and that&mdash;be sure to include why it's great
          </label>
        </div>

        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
            Option two can be something else and selecting it will deselect option one
          </label>
        </div>

        <div class="radio disabled">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
            Option three is disabled
          </label>
        </div>


        <!-- 内联checkbox和内联radio -->
        <!--
                .checkbox-inline
                .radio-inline
                以行的形似来排列
             -->
            <label class="checkbox-inline">
              <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
            </label>
            <label class="checkbox-inline">
              <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
            </label>
            <label class="checkbox-inline">
              <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
            </label>

            <label class="radio-inline">
              <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
            </label>
            <label class="radio-inline">
              <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
            </label>
            <label class="radio-inline">
              <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
            </label>


            <!-- 没有label文本 -->

            <div class="checkbox">
              <label>
                <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
              </label>
            </div>


            <!-- select -->
            <select class="form-control">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
            <!-- 对于标记了 multiple 属性的 <select> 控件来说，默认显示多选项。 -->
            <select multiple class="form-control">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>


            <!--(5) 静态控件  不可以修改 -->
            <form class="form-horizontal">
            <!-- 水平排列 -->
              <div class="form-group">
              <!-- 栅格 -->
                <label class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                <!-- 静态控件
                    .form-control-static
                 -->
                  <p class="form-control-static">email@example.com</p>
                </div>
              </div>
              <div class="form-group">
                <label for="inputPassword" class="col-sm-2 control-label">Password</label>
                <div class="col-sm-10">
                  <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                </div>
              </div>
            </form>



            <form class="form-inline">
            <!-- 行级排列 -->
              <div class="form-group">
              <!-- 隐藏label -->
                <label class="sr-only">Email</label>
                <!-- 静态email -->
                <p class="form-control-static">email@example.com</p>
              </div>


              <div class="form-group">
                <label for="inputPassword2" class="sr-only">Password</label>
                <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
              </div>
              <button type="submit" class="btn btn-default">Confirm identity</button>
            </form>





            <!-- <6>  禁用状态-->
            <!-- 设置disabled -->
                <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>


            <!-- 为fieldset设置disabled，就把所有的控件都禁用了 -->
            <form>
              <fieldset disabled>
                <div class="form-group">
                  <label for="disabledTextInput">Disabled input</label>
                  <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
                </div>
                <div class="form-group">
                  <label for="disabledSelect">Disabled select menu</label>
                  <select id="disabledSelect" class="form-control">
                    <option>Disabled select</option>
                  </select>
                </div>
                <div class="checkbox">
                  <label>
                    <input type="checkbox"> Can't check this
                  </label>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
              </fieldset>
            </form>





            <!-- （7）只读状态
                设置属性.readonly
                鼠标点击仍可以显示边框效果，但是不能修改
            -->
                <input class="form-control" type="text" placeholder="Readonly input here…" readonly>

            <!-- (8) 校验状态 -->
            <!-- Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。 -->

            <div class="form-group has-success">
            <!-- 用整个div包裹使得所有内容都显示为success -->
              <label class="control-label" for="inputSuccess1">Input with success</label>
              <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
              <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
            </div>
            <div class="form-group has-warning">
              <label class="control-label" for="inputWarning1">Input with warning</label>
              <input type="text" class="form-control" id="inputWarning1">
            </div>
            <div class="form-group has-error">
              <label class="control-label" for="inputError1">Input with error</label>
              <input type="text" class="form-control" id="inputError1">
            </div>
            <div class="has-success">
              <div class="checkbox">
                <label>
                  <input type="checkbox" id="checkboxSuccess" value="option1">
                  Checkbox with success
                </label>
              </div>
            </div>
            <div class="has-warning">
              <div class="checkbox">
                <label>
                  <input type="checkbox" id="checkboxWarning" value="option1">
                  Checkbox with warning
                </label>
              </div>
            </div>
            <div class="has-error">
              <div class="checkbox">
                <label>
                  <input type="checkbox" id="checkboxError" value="option1">
                  Checkbox with error
                </label>
              </div>
            </div>




            <!-- （8）添加图标 -->
            <!-- 你还可以针对      -----校验状态------            为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。 -->

            <!-- 反馈图标（feedback icon）只能使用在文本输入框 <input class="form-control"> 元素上。 -->
            <!--
            ******图标、label 和输入控件组
                    对于不带有 label 标签的输入框以及右侧带有附加组件的输入框组，需要手动为其图标定位。为了让所有用户都能访问你的网站，我们强烈建议为所有输入框添加 label 标签。如果你不希望将 label 标签展示出来，可以通过添加 .sr-only 类来实现。如果的确不能添加 label 标签，请调整图标的 top 值。对于输入框组，请根据你的实际情况调整 right 值。

             -->
                <div class="form-group has-success has-feedback">
                <!-- .form-group   .has-success  .has-feedback使用反馈图标-->
                  <label class="control-label" for="inputSuccess2">Input with success</label>
                      <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
                      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                  <span id="inputSuccess2Status" class="sr-only">(success)</span>
                </div>
                <div class="form-group has-warning has-feedback">
                  <label class="control-label" for="inputWarning2">Input with warning</label>
                  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
                  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
                  <span id="inputWarning2Status" class="sr-only">(warning)</span>
                </div>
                <div class="form-group has-error has-feedback">
                  <label class="control-label" for="inputError2">Input with error</label>
                  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
                  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
                  <span id="inputError2Status" class="sr-only">(error)</span>
                </div>
                <div class="form-group has-success has-feedback">
                  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
                  <div class="input-group">
                    <span class="input-group-addon">@</span>
                    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
                  </div>
                  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
                </div>












        <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
        <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>